﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块控制</title>
    <script src="~/lib/vue@3/vue.global.js"></script>
    <script src="~/lib/vue@3/vue.global.prod.js"></script>
    <script src="~/lib/vue@3/vue.esm-browser.js"></script>
    <script src="~/lib/axios.min.js"></script>
    <script src="~/lib/element-plus.js"></script>
    <link href="~/lib/element-plus/index.min.css" rel="stylesheet" />
    <link href="~/lib/element-plus/index.css" rel="stylesheet" />
    <script src="~/lib/element-plus/index.full.min.js"></script>
    <script src="~/lib/element-plus/index.full.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background-color: #f5f7fa;
        }

        .container {
            padding: 20px;
            max-width: max-content;
            margin: 0 auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e6e6e6;
        }

            .header h1 {
                color: #303133;
                margin: 0;
            }

        .search-box {
            background: white;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .table-container {
            background: white;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .pagination-container {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }

        .operation-buttons {
            display: flex;
            gap: 10px;
        }

        .footer {
            margin-top: 30px;
            text-align: center;
            color: #909399;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <h1>请更正自己的页面地址,格式(/Home/Index)</h1>
                <el-button type="primary" v-on:click="refreshData">刷新数据</el-button>
            </div>

            <div class="search-box">
                <el-form :inline="true" :model="searchForm">
                    <el-form-item label="模块名称">
                        <el-input v-model="searchForm.jurName" placeholder="请输入模块名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="模块地址">
                        <el-input v-model="searchForm.jurAddress" placeholder="请输入模块地址" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="handleSearch">查询</el-button>
                        <el-button v-on:click="resetSearch">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="table-container">
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="jurID" label="模块ID" width="100"></el-table-column>
                    <el-table-column prop="jurName" label="模块名称"></el-table-column>
                    <el-table-column prop="jurAddress" label="模块地址"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <template #default="scope">
                            <div class="operation-buttons">
                                <el-button size="small" v-on:click="handleView(scope.row)">查看</el-button>
                                <el-button size="small" type="primary" v-on:click="handleEdit(scope.row)">编辑</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="pagination-container">
                <el-pagination v-model:current-page="currentPage"
                               v-model:page-size="pageSize"
                               :page-sizes="[10, 20, 50, 100]"
                               :total="total"
                               layout="total, sizes, prev, pager, next, jumper"
                               v-on:size-change="handleSizeChange"
                               v-on:current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <!-- 详情对话框 -->
        <el-dialog v-model="detailDialogVisible" title="模块详情" width="500px">
            <el-descriptions :column="1" border v-if="currentJurisdiction">
                <el-descriptions-item label="模块ID">{{ currentJurisdiction.jurID }}</el-descriptions-item>
                <el-descriptions-item label="模块名称">{{ currentJurisdiction.jurName }}</el-descriptions-item>
                <el-descriptions-item label="模块地址">{{ currentJurisdiction.jurAddress }}</el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <el-button v-on:click="detailDialogVisible = false">关闭</el-button>
            </template>
        </el-dialog>

        <!-- 编辑对话框 -->
        <el-dialog v-model="editDialogVisible" title="编辑模块" width="500px">
            <el-form :model="editForm" :rules="rules" ref="editFormRef" label-width="100px">
                <el-form-item label="模块ID" prop="jurID">
                    <el-input v-model="editForm.jurID" disabled></el-input>
                </el-form-item>
                <el-form-item label="模块名称" prop="jurName">
                    <el-input v-model="editForm.jurName" disabled></el-input>
                </el-form-item>
                <el-form-item label="模块地址" prop="jurAddress">
                    <el-input v-model="editForm.jurAddress" placeholder="请输入模块地址"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button v-on:click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" v-on:click ="submitEdit">保存</el-button>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp, ref, reactive, onMounted, computed } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
            setup() {
                // 表格数据
                const tableData = ref([]);
                const currentPage = ref(1);
                const pageSize = ref(10);
                const total = ref(0);

                // 搜索表单
                const searchForm = reactive({
                    jurName: '',
                    jurAddress: ''
                });

                // 对话框控制
                const detailDialogVisible = ref(false);
                const editDialogVisible = ref(false);

                // 当前选中的模块
                const currentJurisdiction = ref(null);

                // 编辑表单
                const editForm = reactive({
                    jurID: '',
                    jurName: '',
                    jurAddress: ''
                });

                // 验证规则
                const rules = reactive({
                    jurAddress: [
                        { required: true, message: '模块地址不能为空', trigger: ['blur', 'change'] }, // 失焦+输入变化都触发
                        { whitespace: true, message: '模块地址不能为纯空格', trigger: ['blur', 'change'] }, // 禁止纯空格
                        { min: 1, max: 200, message: '模块地址长度在 1 到 200 个字符之间', trigger: ['blur', 'change'] }
                    ]
                });

                // 表单引用
                const editFormRef = ref(null);

                // 获取模块列表
                const fetchJurisdictions = async () => {
                    try {
                        const response = await axios.post('/Jurisdiction/GetAll');
                        if (response.data.code === 200) {
                            tableData.value = response.data.data;
                            total.value = response.data.data.length;
                            ElMessage.success('数据加载成功');
                        } else {
                            ElMessage.error('数据加载失败: ' + response.data.msg);
                        }
                    } catch (error) {
                        console.error('获取模块列表失败:', error);
                        ElMessage.error('数据加载失败，请检查网络连接');
                    }
                };

                // 查看模块详情
                const handleView = async (row) => {
                    try {
                        const response = await axios.post(`/Jurisdiction/GetById?id=${row.jurID}`);
                        if (response.data.code === 200) {
                            currentJurisdiction.value = response.data.data;
                            detailDialogVisible.value = true;
                        } else {
                            ElMessage.error('获取模块详情失败: ' + response.data.msg);
                        }
                    } catch (error) {
                        console.error('获取模块详情失败:', error);
                        ElMessage.error('获取模块详情失败');
                    }
                };

                // 编辑模块
                const handleEdit = (row) => {
                    Object.assign(editForm, row);
                    editDialogVisible.value = true;
                };

                // 提交
                const submitEdit = async () => {
                    if (!editFormRef.value) return; 
                    try {
                        // 仅执行验证，成功则继续，失败会直接抛出错误进入catch
                        await editFormRef.value.validate();
                        // 验证通过-提交修改请求
                        const response = await axios.post(`/Jurisdiction/Update?id=${editForm.jurID}&Name=${editForm.jurAddress}`);
                        if (response.data.code === 200) {
                            ElMessage.success('模块修改成功');
                            editDialogVisible.value = false;
                            fetchJurisdictions(); // 刷新数据
                        } else {
                            ElMessage.error('模块修改失败: ' + response.data.msg);
                        }
                    } catch (error) {
                        console.error('表单验证失败或提交错误:', error);
                        ElMessage.warning('请检查模块地址输入是否符合要求');
                        return;
                    }
                };

                // 搜索
                const handleSearch = () => {
                    currentPage.value = 1;
                    filterData();
                };

                // 重置搜索
                const resetSearch = () => {
                    searchForm.jurName = '';
                    searchForm.jurAddress = '';
                    currentPage.value = 1;
                    fetchJurisdictions();
                };

                // 前端过滤数据
                const filterData = () => {
                    fetchJurisdictions().then(() => {
                        let filteredData = tableData.value;
                        if (searchForm.jurName) {
                            filteredData = filteredData.filter(item =>
                                item.jurName.includes(searchForm.jurName)
                            );
                        }
                        if (searchForm.jurAddress) {
                            filteredData = filteredData.filter(item =>
                                item.jurAddress.includes(searchForm.jurAddress)
                            );
                        }
                        tableData.value = filteredData;
                        total.value = filteredData.length;
                    });
                };

                // 分页处理
                const handleSizeChange = (val) => {
                    pageSize.value = val;
                    currentPage.value = 1;
                };
                const handleCurrentChange = (val) => {
                    currentPage.value = val;
                };

                // 刷新数据
                const refreshData = () => {
                    fetchJurisdictions();
                };

                // 计算当前页显示的数据
                const paginatedData = computed(() => {
                    const start = (currentPage.value - 1) * pageSize.value;
                    const end = start + pageSize.value;
                    return tableData.value.slice(start, end);
                });

                // 生命周期
                onMounted(() => {
                    fetchJurisdictions();
                });

                return {
                    tableData: paginatedData,
                    currentPage,
                    pageSize,
                    total,
                    searchForm,
                    detailDialogVisible,
                    editDialogVisible,
                    currentJurisdiction,
                    editForm,
                    rules,
                    editFormRef,
                    handleView,
                    handleEdit,
                    submitEdit,
                    handleSearch,
                    resetSearch,
                    handleSizeChange,
                    handleCurrentChange,
                    refreshData
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>